<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable + Sortable</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <!--<link rel="stylesheet" href="/resources/demos/style.css">-->
  <style>
    ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
    li { margin: 5px; padding: 5px; width: 150px; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    function combine (ary) {
      return ary.reduce(function (a, b) {
        console.log(b.constructor===Array);
        return (b.constructor===Array) ? a.concat(b) : (a.push(b) ? a : a);
      }, []);
    }


    $( function() {
      $( "#sortable" ).sortable({
        revert: true
      });
      $( "#draggable" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
      });
      $( "ul, li" ).disableSelection();
    } );

    var c = [{1:0}, 3, 5, 7, [12, 4]];
    console.log(combine(c));


    // $.ajax({
    //   type:'GET',
    //   url:'http://171.221.173.155:7998/common_ajax?url=www.mcliuwu.com/getdata.html?v=1_1',
    //   dataType:'jsonp',
    //   jsonpCallback: 'callbackName',
    //   crossDomain: true,
    //   success:function (dt) {
    //     console.log(dt);
    //   }
    // });


  </script>
</head>
<body>

<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>

<ul id="sortable">
  <li class="">Item 1</li>
  <li class="">Item 2</li>
  <li class="">Item 3</li>
  <li class="">Item 4</li>
  <li class="">Item 5</li>
</ul>


</body>
</html>
